<template>
	<view class="color">
		<view class="Fonttextbox louis-padding-lf-0 louis-relative">
			<view class="Fonttext louis-font-pixel louis-absolute ">
				<!-- 色彩 -->
			</view>
			<louis-back>

			</louis-back>
			<image class="louis-w-max " :src="imgsrc" mode="widthFix"></image>
		</view>

		<view class="coloritem">
			<view class="font">
				<view class="Basics Basicsred ">
					<view class="louis-space-between">
						<view class="louis-font-25 louis-text-center">
						
							<text class=" louis-font-25 ">
								字体：louis-color-颜色
							</text>
						
						</view>
						
						<view class="louis-font-25 louis-text-center">
						
							<text class=" louis-font-25 ">
								背景：louis-bg-颜色
							</text>
						
						</view>
					</view>
				</view>
				<view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue louis-center">
					<view class="louis-center louis-font-pixel">
						<text>{{viewstyle}}</text>
					</view>
				</view>
				
				<view @tap="colorlistshow=!colorlistshow" class="Basics">
					<view class="louis-margin-bottom-10rpx louis-font-center">
						辅助色
					</view>

					<view v-for="(item,index) in mincolorlist" :key="index" :class="'louis-bg-'+item.color" class="louis-mind-center  colorblock">
						<view class="louis-flex-align-between">
							<view class="louis-font-center louis-padding-2rpx">
								{{item.color}}
							</view>
							<view class="louis-font-center louis-padding-2rpx">
								{{item.name}}
							</view>
							<view class="louis-font-center louis-padding-2rpx">
								{{item.hex}}
							</view>
						</view>

					</view>

					<view class="louis-padding-tb-10rpx louis-font-center">
						中性色
					</view>

					<view v-for="(item,index) in fontcolorlist" :key="item.color" :class="'louis-bg-'+item.color" class="louis-mind-center  colorblock"
					 :id="item.color=='F'?'F':''">
						<view class="louis-flex-align-between">
							<view class="louis-font-center louis-padding-2rpx">
								{{item.color}}
							</view>
							<view class="louis-font-center louis-padding-2rpx">
								{{item.name}}
							</view>
							<view class="louis-font-center louis-padding-2rpx">
								{{item.hex}}
							</view>
						</view>

					</view>
					<view class="louis-padding-10rpx">

					</view>
					<view v-if="!colorlistshow" class="louis-padding-tb-10rpx louis-font-center">

						<text  class="Basics">更多颜色</text>

						<!-- <i class="louis-icon-gengduo" ></i> -->
					</view>
					<view v-if="colorlistshow" class="louis-padding-tb-10rpx louis-font-center">
						<text  class="Basics ">收起彩虹</text>
					</view>
					<view class="louis-padding-10rpx">

					</view>
					<view v-if="colorlistshow" @tap="colorlistshow=false" v-for="(item,index) in colorlist" :key="item.color" style="width: 220rpx;height: 100rpx;"
					 :class="'louis-bg-'+item.color" class="louis-color-F louis-mind-center  colorblock" :id="item.color=='white'?'F':''">
						<view class="louis-flex-align-between ">
							<view class="louis-font-center  louis-padding-2rpx">

								<text class="louis-bg-MD">{{item.color}}</text>
							</view>
							<view class="louis-font-center  louis-padding-2rpx">
								<text class="louis-bg-MD">{{item.name}}</text>
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>
         
		<view class="coloritem">
			<view class="font">
				<view class="Basics Basicsred louis-center">
					Vue可使用组件的方式实现自定义颜色自定义背景
				</view>
				<view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue louis-center">
					<view class="louis-center louis-font-pixel">
						<text>{{louisview}}</text>
					</view>
				</view>
				
				<view class="Basics ">
					
					
					
					
					<louis-view
					  style="margin: 10rpx 20rpx;"
					  class="louis-radius-10rpx"
					  color='#ccc' 
					  
					  >
						
						<view class="louis-padding-10rpx">
						  {{louisitem}}标签,
						</view>
						<view class="louis-padding-10rpx">
						  传参:color,bg目前支持HEX颜色格式,
						</view>
						<view class="louis-padding-10rpx">
							在main.js全局引入
						</view>
						
						<view class="louis-padding-10rpx">
							import louisView from './louis-ui/components/louis-view/louis-view.vue'
												
						</view>
						<view class="louis-padding-10rpx">
							Vue.component('louis-view', louisView)
						</view>
					</louis-view>

				</view>

			</view>
		</view>  



	</view>
</template>





<script>
	export default {
		data() {
			return {
				viewstyle:"<view class='louis-bg-P louis-color-I' ></view>",
				louisitem:"<louis-view>",
                louisview:"<louis-view bg='#409eff' color='#ffffff' ></louis-view>",
				// imgsrc: "http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200723/20200723/0.91296200%201595469229d3eb9a9233e52948740d7eb8c3062d14.gif",
				imgsrc:"http://zons.oss-cn-shenzhen.aliyuncs.com/2bdf1152c6c9bf403224f6877f625656a4717362.gif",
				fontstyle: false,
				morecolor: false,
				Englishlish: [{
						color: "tomato",
						name: "番红"
					},
					{
						color: "forestgreen",
						name: "森绿"
					},
					{
						color: "gold",
						name: "昏黄"
					},

				],
				mincolorlist: [

					{
						color: "P",
						name: "普通",
						hex: "#409EFF"
					},
					{
						color: "S",
						name: "成功",
						hex: "#67C23A"
					},
					{
						color: "W",
						name: "警告",
						hex: "#E6A23C"
					},
					{
						color: "D",
						name: "危险",
						hex: "#F56C6C"
					},
					{
						color: "I",
						name: "信息",
						hex: "#909399"
					},

				],
				fontcolorlist: [{
						color: "M",
						name: "主要",
						hex: "#303133"
					},
					{
						color: "R",
						name: "常规",
						hex: "#606266"
					},
					{
						color: "A",
						name: "次要",
						hex: "#909399"
					},
					{
						color: "H",
						name: "普通",
						hex: "#C0C4CC"
					},
					{
						color: "F",
						name: "苍白",
						hex: "#FFFFFF"
					}
				],
				colorlistshow: false,
				colorlist: [{
						color: "lightpink",
						name: "浅粉红"
					},
					{
						color: "pink",
						name: "粉红"
					},
					{
						color: "crimson",
						name: "猩红"
					},
					{
						color: "palevioletred",
						name: " 紫罗兰红色"
					},
					{
						color: "hotpink",
						name: "热情的粉红"
					},
					{
						color: "deeppink",
						name: "深粉色"
					},
					{
						color: "mediumvioletred",
						name: " 紫罗兰红色"
					},
					{
						color: "orchid",
						name: "兰花的紫色"
					},
					{
						color: "thistle",
						name: "蓟"
					},
					{
						color: "plum",
						name: "李子"
					},
					{
						color: "violet",
						name: "紫罗兰"
					},
					{
						color: "magenta",
						name: "洋红"
					},
					{
						color: "fuchsia",
						name: "灯笼海棠紫红色"
					},
					{
						color: "darkmagenta",
						name: "深洋红色"
					},
					{
						color: "purple",
						name: "紫色"
					},
					{
						color: "mediumorchid",
						name: "兰花紫"
					},
					{
						color: "darkviolet",
						name: "深紫罗兰色"
					},
					{
						color: "darkorchid",
						name: "深兰花紫"
					},
					{
						color: "indigo",
						name: "靛青"
					},
					{
						color: "blueviolet",
						name: "深紫罗兰的蓝色"
					},
					{
						color: "mediumpurple",
						name: " 紫色"
					},
					{
						color: "mediumslateblue",
						name: "板岩暗蓝灰色"
					},
					{
						color: "slateblue",
						name: "板岩暗蓝灰色"
					},
					{
						color: "darkslateblue",
						name: "深岩暗蓝灰色"
					},
					{
						color: "blue",
						name: "纯蓝"
					},
					{
						color: "mediumblue",
						name: " 蓝色"
					},
					{
						color: "midnightblue",
						name: "午夜的蓝色"
					},
					{
						color: "darkblue",
						name: "深蓝色"
					},
					{
						color: "navy",
						name: "海军蓝"
					},
					{
						color: "royalblue",
						name: "皇军蓝"
					},
					{
						color: "cornflowerblue",
						name: "矢车菊的蓝色"
					},
					{
						color: "lightsteelblue",
						name: "淡钢蓝"
					},
					{
						color: "lightslategray",
						name: "浅石板灰"
					},
					{
						color: "slategray",
						name: "石板灰"
					},
					{
						color: "steelblue",
						name: "钢蓝"
					},
					{
						color: "lightskyblue",
						name: "淡天蓝色"
					},
					{
						color: "skyblue",
						name: "天蓝色"
					},
					{
						color: "deepskyblue",
						name: "深天蓝"
					},
					{
						color: "lightblue",
						name: "淡蓝"
					},
					{
						color: "powderblue",
						name: "火药蓝"
					},
					{
						color: "cadetblue",
						name: "军校蓝"
					},
					{
						color: "cyan",
						name: "青色"
					},
					{
						color: "aqua",
						name: "水绿色"
					},
					{
						color: "darkturquoise",
						name: "深绿宝石"
					},
					{
						color: "darkcyan",
						name: "深青色"
					},
					{
						color: "teal",
						name: "水鸭色"
					},
					{
						color: "mediumturquoise",
						name: " 绿宝石"
					},
					{
						color: "lightseagreen",
						name: "浅海洋绿"
					},
					{
						color: "turquoise",
						name: "绿宝石"
					},
					{
						color: "mediumaquamarine",
						name: " 碧绿色"
					},
					{
						color: "mediumspringgreen",
						name: " 春天的绿色"
					},
					{
						color: "yellowgreen",
						name: "黄绿色"
					},
					{
						color: "olive",
						name: "橄榄"
					},
					{
						color: "darkkhaki",
						name: "深卡其布"
					},
					{
						color: "gold",
						name: "金"
					},
					{
						color: "tan",
						name: "晒黑"
					},
					{
						color: "burlywood",
						name: "结实的树"
					},
					{
						color: "darkorange",
						name: "深橙色"
					},
					{
						color: "peru",
						name: "秘鲁"
					},
					{
						color: "peachpuff",
						name: "桃色"
					},
					{
						color: "sandybrown",
						name: "沙棕色"
					},
					{
						color: "chocolate",
						name: "巧克力"
					},
					{
						color: "saddlebrown",
						name: "马鞍棕色"
					},
					{
						color: "sienna",
						name: "黄土赭色"
					},
					{
						color: "coral",
						name: "珊瑚"
					},
					{
						color: "orangered",
						name: "橙红色"
					},
					{
						color: "darksalmon",
						name: "深鲜鲑鱼肉色"
					},
					{
						color: "tomato",
						name: "番茄"
					},
					{
						color: "lightcoral",
						name: "淡珊瑚色"
					},
					{
						color: "rosybrown",
						name: "玫瑰棕色"
					},
					{
						color: "indianred",
						name: "印度红"
					},
					{
						color: "red",
						name: "纯红"
					},
					{
						color: "brown",
						name: "棕色"
					},
					{
						color: "firebrick",
						name: "耐火砖"
					},
					{
						color: "darkred",
						name: "深红色"
					},

					{
						color: "black",
						name: "黑暗"
					},
					{
						color: "white",
						name: "光明"
					},{
						color: "transparent",
						name: "透明"
					},

				]
			};
		},
		mounted() {

		},
		methods: {

		}
	}
</script>
<style scoped lang="less">
	.Fonttextbox {
		// height: 4000rpx;
		overflow: hidden;

	}

	.Fonttext {
		// -webkit-text-stroke: 1px #6893a0;
		position: absolute;
		z-index: 200;
		// color: rgba(255, 255, 255, 0.7);
		width: 100%;
		height: 100%;
		top: 98rpx;
		right: 200rpx;
		width: 200rpx;
		font-size: 38rpx;
		// transform:skewX(23deg);
		color: #db79a5;
		font-weight: bold;
		opacity: 0.8;
	}

	.Basics {
		color: #FFF;
		font-size: 25rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 2px solid #C0C0C0;
		box-sizing: border-box;
		background-color: rgba(29, 5, 41, 0.8);
		padding-top: 15rpx;
		padding-bottom: 20rpx;

		// &:active {
		// 	background-color: rgba(206, 31, 84, 0.8);
		// }
	}

	.Basicsred {
		background-color: rgba(206, 31, 84, 0.6);
	}
	.Basicsrblue {
		background-color: rgba(64, 158, 255, 0.6);
	}
    
	.font {
		margin-top: 20rpx;
	}

	.coloritem {
		position: relative;
		top: -40rpx;
	}

	.colorblock {

		// font-size: 25rpx;
		display: inline-block;
		margin-left: 7rpx;
		// margin-top: 10rpx;
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		overflow: hidden;
	}

	.colorblock:nth-child(5n) {
		margin-right: 0rpx;
	}

	#F {
		color: #000000
	}

	.louis-bg-MD {
		// background-color: rgba(0,0,0,0.1);
		display: inline-block;
		padding: 5rpx 10rpx;

	}

	.color {
		background-color: #434168;
		background-image: none
	}
</style>
